DOM

The HTML DOM (Document Object Model) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects, allowing programming languages to interact with the page.

DOM Tree Structure

The DOM represents HTML as a tree structure of tags. Here’s a simple example:

This HTML document can be visualized as the following DOM tree:

Accessing DOM Elements

You can access HTML elements using various methods:

        // By ID
        let element = document.getElementById("myElement");
        
        // By Class Name
        let elements = document.getElementsByClassName("myClass");
        
        // By Tag Name
        let elements = document.getElementsByTagName("div");
        
        // By CSS Selector
        let element = document.querySelector(".myClass");
        let elements = document.querySelectorAll(".myClass");

Accessing Elements

You can access HTML elements using various methods:

document.getElementById(id): Selects an element by its ID.
document.getElementsByClassName(class): Selects elements by their class name.
document.getElementsByTagName(tag): Selects elements by their tag name.
document.querySelector(selector): Selects the first element that matches a CSS selector.
document.querySelectorAll(selector): Selects all elements that match a CSS selector.

let element = document.getElementById("myElement");
let elements = document.getElementsByClassName("myClass");
let tags = document.getElementsByTagName("div");
let firstElement = document.querySelector(".myClass");
let allElements = document.querySelectorAll(".myClass");

Manipulating Elements

You can manipulate HTML elements using various properties and methods:

element.innerHTML: Gets or sets the HTML content of an element.
element.textContent: Gets or sets the text content of an element.
element.style: Gets or sets the inline style of an element.
element.setAttribute(name, value): Sets an attribute on an element.
element.getAttribute(name): Gets the value of an attribute on an element.
element.removeAttribute(name): Removes an attribute from an element.

let element = document.getElementById("myElement");
element.innerHTML = "Hello, World!";
element.style.color = "blue";
element.setAttribute("data-custom", "value");
let attrValue = element.getAttribute("data-custom");
element.removeAttribute("data-custom");

Event Handling

You can handle events using various methods:

element.addEventListener(event, function): Adds an event listener to an element.
element.removeEventListener(event, function): Removes an event listener from an element.

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("Button clicked!");
});

button.removeEventListener("click", function() {
    alert("Button clicked!");
});

Example

Here is an example demonstrating the use of the HTML DOM in JavaScript:

document.addEventListener("DOMContentLoaded", function() {
    let element = document.getElementById("myElement");
    element.innerHTML = "Hello, World!";
    element.style.color = "blue";

    let button = document.getElementById("myButton");
    button.addEventListener("click", function() {
        element.style.color = "red";
    });
});

Example with Child Elements

Here is an example demonstrating how to access and manipulate child elements:

<html>
    <body>
    <div id="parent">
        <div class="child">Child 1</div>
        <div class="child">Child 2</div>
    </div>
    
    <script>
    let parent = document.getElementById("parent");
    let children = parent.getElementsByClassName("child");
    
    // Changing content of the first child
    children[0].innerHTML = "Updated Child 1";
    
    // Adding a new child
    let newChild = document.createElement("div");
    newChild.className = "child";
    newChild.innerHTML = "Child 3";
    parent.appendChild(newChild);
    
    // Removing the second child
    parent.removeChild(children[1]);
    </script>
    
    </body>
    </html>

For more detailed information, you can check out resources like W3Schools[^1^][1] and MDN Web Docs[^2^][2].